// $l: 5; // 5行
$n: 9; // 每一行个数
$width: 100vw / $n;

body {
  margin: 0;
  box-sizing: border-box;
  background-color: black;
}
.line {
  display: flex;
  .item {
    box-sizing: border-box;
    flex-shrink: 0;
    width: $width;
    height: $width;
    background-color: black;
    // background-image: url('https://picsum.photos/100/100');
    object-fit: cover;
    border: 1px solid red;
    clip-path: polygon(50% 0%, 94% 26%, 94% 75%, 50% 100%, 6% 75%, 6% 25%);
    transform: scale(1);
    cursor: pointer;
    transition: transform 1s;
    // &:hover {
    //   transform: scale(1.08);
    // }
    &.hover {
      transform: scale(1.08);
    }
  }
  // @for $i from 1 through $n + 1 {
  //   .item:nth-child(#{$i}) {
  //     background-image: url('https://picsum.photos/100/100?random=#{$i}');
  //   }
  // }
  &:nth-child(even) {
    margin-left: -$width/2;
  }
  &:nth-child(n+2) {
    margin-top: -$width/6;
  }
}
